<template>
  <div class="compilationSummary-tab">
    <p class="g-unit">收入:万元, 用户数: 万户</p>
    <div class="tableBox tableBox3">
      <el-table id="table2"
        v-loading="tableLoading"
        :data="tableData"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table"
      >
        <el-table-column
          label="类别"
          prop="class1"
          class-name="first-title"
          min-width="50"
        ></el-table-column>
        <el-table-column
          label="类别"
          prop="class2"
          class-name="second-title"
          min-width="50"
        ></el-table-column>
        <el-table-column
          label="类别"
          prop="class3"
          class-name="third-title"
          min-width="110"
        ></el-table-column>
        <el-table-column
          label="类别"
          prop="indexName"
          class-name="for-title"
          min-width="110"
        ></el-table-column>
        <el-table-column
            v-for="(item, index) in newArr"
            :key="index"
            :label="item.label"
          >
            <el-table-column
              min-width="120"
              v-for="(it, i) in item.data"
              :key="i"
              :label="it.label"
              :prop="it.prop"
            >
            </el-table-column>
          </el-table-column>
        <!-- <el-table-column label="用户/套餐（万户）">
          
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
export default {
  name: "budgeting-tab1",
  props: {
    rowData: {
      type: Array,
      default: [],
    },
    colDefList: {
      type: Array,
      default: [],
    },
    isAll: {
      type: Boolean,
      default: true,
    }
  },

  data() {
    return {
      spanArr: [],
      tableData: [],
      colList: [],
      newArr: [],
      tableLoading: false,
      flag: 0,
    };
  },
  // watch: {
  //   rowData(val) {
  //     this.tableData = this.rowData[0];
  //   },
  //   colDefList(v) {
  //     this.colList = this.colDefList[0];
  //     this.init();
  //   },
  // },
  methods: {
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.tableData.length > 0) {
        if (
          columnIndex == 0 ||
          columnIndex == 1 ||
          columnIndex == 2 ||
          columnIndex == 3
        ) {
          return this.spanArr.length && this.spanArr[rowIndex][columnIndex];
        }
      }
    },

    init() {
      var that = this;
      that.newArr = [];
      that.flag = 0;
      if (that.isAll) {
          that.newArr = that.colDefList;
      } else {
        that.colDefList.map(it => {
            it.data = [it.data[0]]
        })
        that.newArr = that.colDefList;
      }
      
      for (let index = 0; index < that.rowData.length; index++) {
        var it = that.rowData[index];
        if (it.class3 == null) {
          it.class3 = it.indexName;
        }
      }
      that.tableData = that.rowData;
   
   
      that.spanArr = mergeSpan(that.tableData, [
        "class1",
        "class2",
        "class3",
        "indexName",
      ]);

      that.$nextTick(() => {
        that.$refs.table.doLayout();
      });
    },
  },
};
</script>

<style lang="scss">
.compilationSummary-tab {
  .first-title.is-leaf {
    position: relative;
    font-size: 0 !important;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .second-title.is-leaf {
    position: relative;
    font-size: 0 !important;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }

  .third-title.is-leaf {
    position: relative;
    font-size: 0 !important;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .for-title.is-leaf {
    overflow: visible;
    .cell {
      transform: translateX(-100%);
      white-space: nowrap;
      overflow: visible;
    }
  }
  /deep/ .for-title .cell {
    text-align: center;
  }
}
</style>
